<template>
  <div class="gl_heightFull gl_contentBox">
    <div class="gl_searchBox gl_mb_15">
      <el-row :gutter="20">
        <el-col :span="4">
          <p>搜索学员</p>
          <el-input v-model="Api_GET_ClubCustomerTrialCourseQO.CustomerName" placeholder="请输入学员姓名" size="mini" clearable @change="gettablelist()" />
        </el-col>
        <el-col :span="4">
          <p>试听状态</p>
          <el-select v-model="isfollow" size="mini" @change="gettablelist()">
            <el-option label="全部" value="" />
            <el-option label="已上课" :value="false" />
            <el-option label="待上课" :value="true" />
          </el-select>
        </el-col>
        <el-col :span="4">
          <p>试课时间</p>
          <el-date-picker
            v-model="tableDate"
            size="mini"
            style="width: 100%"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            @change="changeDate"
          />
        </el-col>
        <el-col :span="4">
          <p>课程名称</p>
          <el-select v-model="courseid" size="mini" @change="gettablelist()">
            <el-option label="全部" value="" />
            <el-option v-for="(item, index) in course" :key="index" :label="item.name" :value="item.id" />
          </el-select>
        </el-col>
        <el-col :span="4">
          <p>试课班级</p>
          <el-select v-model="classid" size="mini" @change="gettablelist()">
            <el-option label="全部" value="" />
            <el-option v-for="(item, index) in classlist" :key="index" :label="item.name" :value="item.id" />
          </el-select>
        </el-col>
        <el-col :span="4">
          <p>跟进人</p>
          <el-select v-model="followid" size="mini" @change="gettablelist()">
            <el-option label="全部" value="" />
            <el-option v-for="(item, index) in follow" :key="index" :label="item.employeeName" :value="item.employeeId" />
          </el-select>
        </el-col>
        <el-col :span="4" class="search_btn">
          <!-- 查询按钮 -->
          <el-button type="primary" size="mini" @click="gettablelist()">筛选</el-button>
          <!-- 重置按钮 -->
          <el-button type="warning" size="mini" @click="clickReset()">重置</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="nav">
      <el-button type="primary" icon="el-icon-circle-plus-outline" style="margin-bottom:15px" size="mini" @click="addstudent()">办理试课</el-button>
      <el-button type="warning" size="mini" :loading="btnDownLoading" @click="exportstudent()">导出</el-button>
      <el-table v-loading="tableLoading" class="gl_table_noBorder" :data="tableData" size="mini">
        <el-table-column label="学员姓名" prop="customerName" />
        <el-table-column label="联系方式" prop="customerPhoneNumber" />
        <el-table-column label="试课班级" prop="className" />
        <el-table-column label="课程名称" prop="courseName" />
        <el-table-column label="试课教室" prop="classroomName" />
        <el-table-column label="上课时间">
          <template slot-scope="{ row }">
            <div v-if="row.courseTime">
              {{ row.courseTime | FormatDate('yyyy-MM-dd') }} {{ row.courseTime | FormatDate('HH:mm') }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="上课教练" prop="coachName" align="center" />
        <el-table-column label="跟进人" prop="followUpEmployeeName" align="center" />
        <el-table-column label="试听状态" prop="isFinished" align="center">
          <template slot-scope="{row}">
            <span>{{ row.isFinished?'已上课':'待上课' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button type="text" size="mini" @click="retrial(row)">重约</el-button>
            <el-button type="text" size="mini" @click="cldelete(row)">取消</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <chooseStudents ref="chooseStudents" />
    <el-row class="gl_pt_15" style="text-align: right;">
      <el-pagination
        :current-page="Api_GET_ClubCustomerTrialCourseQO.Page"
        :page-size="Api_GET_ClubCustomerTrialCourseQO.MaxResultCount"
        :total="total"
        layout="total,sizes,prev,pager,next,jumper"
        :page-sizes="[10, 20, 30, 40]"
        @size-change="sizeChange"
        @current-change="pageIndexChange"
      />
    </el-row>
  </div>
</template>

<script>
import { api_GET_DownLoadFileAddHeader } from '@/extend/api/file';
import { mapState, mapActions } from 'vuex';
import { Api_GET_ClubCustomerTrialCourseQO } from '@/lib/form/hall/swaggerForm';
import { api_GET_ClubCustomerTrialCourse, api_DELETE_ClubCustomerTrialCourseId, api_GET_ClubCourse, api_GET_ClubClass, api_GET_ClubSalesCardStatisticsEmployeeSalesAmounts } from '@/extend/api/hallswaggerApi/app';
import chooseStudents from './chooseStudents.vue';
export default {
  components: {
    chooseStudents
  },
  data() {
    return {
      tableDate: [],
      btnDownLoading: false,
      followid: '',
      follow: [],
      classid: '',
      classlist: [],
      courseid: '',
      course: [],
      isfollow: '',
      total: 0,
      tableLoading: false,
      tableData: [],
      Api_GET_ClubCustomerTrialCourseQO: new Api_GET_ClubCustomerTrialCourseQO(),
      GetStudentInput: {}
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict,
      cache: state => state.dict.cache
    })
  },
  created() {
    this.getDict();
    this.gettablelist();
    this.getinit();
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict', getDictByType: 'dict/getDictByType' }),
    // 获取班级
    getinit() {
      api_GET_ClubCourse().then(res => {
        console.log(res);
        this.course = res.items;
      });
      api_GET_ClubClass({}).then(res => {
        this.classlist = res.items;
      }, error => {
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
      api_GET_ClubSalesCardStatisticsEmployeeSalesAmounts().then(res => {
        this.follow = res.items;
      }, error => {
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    gettablelist(page) {
      this.tableLoading = true;
      this.Api_GET_ClubCustomerTrialCourseQO.IsFinished = this.isfollow;
      this.Api_GET_ClubCustomerTrialCourseQO.CourseId = this.courseid;
      this.Api_GET_ClubCustomerTrialCourseQO.ClassId = this.classid;
      this.Api_GET_ClubCustomerTrialCourseQO.FollowUpEmployeeId = this.followid;
      this.Api_GET_ClubCustomerTrialCourseQO.Sorting = 'creationTime DESC';
      this.Api_GET_ClubCustomerTrialCourseQO.Page = page || 1;
      this.Api_GET_ClubCustomerTrialCourseQO.SkipCount = (this.Api_GET_ClubCustomerTrialCourseQO.Page - 1) * this.Api_GET_ClubCustomerTrialCourseQO.MaxResultCount;
      this.Api_GET_ClubCustomerTrialCourseQO.IncludeCourseSchdule = true; // type: boolean
      this.Api_GET_ClubCustomerTrialCourseQO.IncludeCourse = true; // type: boolean
      this.Api_GET_ClubCustomerTrialCourseQO.IncludeClass = true; // type: boolean
      this.Api_GET_ClubCustomerTrialCourseQO.IncludeClassroom = true; // type: boolean
      this.Api_GET_ClubCustomerTrialCourseQO.IncludeCourseEmployee = true; // type: boolean
      this.Api_GET_ClubCustomerTrialCourseQO.IncludeEmployee = true; // type: boolean
      this.Api_GET_ClubCustomerTrialCourseQO.IncludeCustomer = true; // type: boolean
      api_GET_ClubCustomerTrialCourse(this.Api_GET_ClubCustomerTrialCourseQO).then(res => {
        console.log(res);
        this.tableData = res.items;
        this.tableLoading = false;
        this.total = res.totalCount;
      });
    },
    // 办理试课
    addstudent() {
      this.$refs.chooseStudents.getPageList();
      this.$refs.chooseStudents.dialogVisible = true;
    },
    // 切换录入日期
    changeDate (val) {
      const _start = val ? val[0] + ' 00:00:00' : null;
      const _end = val ? val[1] + ' 23:59:59' : null;
      this.Api_GET_ClubCustomerTrialCourseQO.StartTime = _start; // type: string
      this.Api_GET_ClubCustomerTrialCourseQO.EndTime = _end; // type: string
      this.gettablelist();
    },
    // 取消
    cldelete(item) {
      const that = this;
      that.$confirm(`您确定要取消吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.tableLoading = true;
          api_DELETE_ClubCustomerTrialCourseId(item.id).then(res => {
            this.tableLoading = false;
            that.$message({ type: 'success', message: '取消成功' });
            that.gettablelist();
          }, error => {
            this.tableLoading = false;
            const _msg = error.error.message || error.message;
            that.$message({ type: 'error', message: _msg });
          });
        })
        .catch(() => {
        });
    },
    retrial(row) {
      this.$router.push({
        name: 'Choseclass',
        query: {
          id: row.id, edit: true, studentId: row.customerId }
      });
    },
    // 重置
    clickReset() {
      this.isfollow = '';
      this.courseid = '';
      this.classid = '';
      this.followid = '';
      this.tableDate = [];
      this.Api_GET_ClubCustomerTrialCourseQO = new Api_GET_ClubCustomerTrialCourseQO();
      this.gettablelist();
    },
    // 分页
    sizeChange(MaxResultCount) {
      this.Api_GET_ClubCustomerTrialCourseQO.MaxResultCount = MaxResultCount;
      this.gettablelist();
    },
    pageIndexChange(currentPage) {
      this.gettablelist(currentPage);
    },
    // 导出
    exportstudent() {
      this.GetStudentInput.IsFinished = this.isfollow;
      this.GetStudentInput.CourseId = this.courseid;
      this.GetStudentInput.ClassId = this.classid;
      this.GetStudentInput.FollowUpEmployeeId = this.followid;
      this.GetStudentInput.IncludeCourseSchdule = true; // type: boolean
      this.GetStudentInput.IncludeCourse = true; // type: boolean
      this.GetStudentInput.IncludeClass = true; // type: boolean
      this.GetStudentInput.IncludeClassroom = true; // type: boolean
      this.GetStudentInput.IncludeCourseEmployee = true; // type: boolean
      this.GetStudentInput.IncludeEmployee = true; // type: boolean
      this.GetStudentInput.IncludeCustomer = true; // type: boolean
      this.GetStudentInput.Sorting = 'creationTime DESC';
      this.GetStudentInput = JSON.stringify(this.GetStudentInput);
      var that = this;
      const tempUrl = `/api/excel`;
      const fileName = '招生试课导出' + '.xlsx';
      this.btnDownLoading = true;
      api_GET_DownLoadFileAddHeader(tempUrl, fileName, { reportName: 'CustomerTrialCourse', GetCustomerTrialCoursesInput: this.GetStudentInput }, WEB_CONFIG.VUE_APP_SWAGGER_HALL_BASE).then(res => {
        that.btnDownLoading = false;
        this.GetStudentInput = {};
      }).catch(error => {
        this.GetStudentInput = {};
        that.btnDownLoading = false;
        errorText(error).then(function(text) {
          that.$message({ type: 'error', message: text });
        });
      });
    }
  }

};
</script>

<style>

</style>
